<template>
  <div class="payment-result">
    <header-nav />
    
    <div class="result-container">
      <el-card class="result-card">
        <div v-if="loading" class="loading">
          <el-skeleton :rows="3" animated />
        </div>
        
        <div v-else-if="success" class="success-result">
          <el-icon class="result-icon success-icon"><Check /></el-icon>
          <h2>支付成功</h2>
          <p>您的订单已支付成功，我们将尽快为您发货</p>
          <p class="order-number">订单号: {{ orderNumber }}</p>
          <div class="action-buttons">
            <el-button type="primary" @click="router.push(`/order/${orderNumber}`)">
              查看订单
            </el-button>
            <el-button @click="router.push('/')">
              返回首页
            </el-button>
          </div>
        </div>
        
        <div v-else class="failed-result">
          <el-icon class="result-icon failed-icon"><Close /></el-icon>
          <h2>支付失败</h2>
          <p>很抱歉，您的支付未能完成</p>
          <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
          <div class="action-buttons">
            <el-button type="primary" @click="router.push('/cart')">
              返回购物车
            </el-button>
            <el-button @click="router.push('/')">
              返回首页
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Check, Close } from '@element-plus/icons-vue';
import HeaderNav from '../components/HeaderNav.vue';
import axios from '@/utils/axios';

const route = useRoute();
const router = useRouter();

const loading = ref(true);
const success = ref(false);
const orderNumber = ref('');
const errorMessage = ref('');

onMounted(async () => {
  try {
    // 从URL参数中获取订单信息
    const params = new URLSearchParams(window.location.search);
    const outTradeNo = params.get('out_trade_no');
    
    if (!outTradeNo) {
      success.value = false;
      errorMessage.value = '未找到支付信息';
      loading.value = false;
      return;
    }
    
    // 查询支付状态
    const { data } = await axios.get(`/api/payments/status/by-payment-no/${outTradeNo}`);
    
    if (data.success && data.status === 'paid') {
      success.value = true;
      orderNumber.value = data.order_number;
    } else {
      success.value = false;
      errorMessage.value = data.message || '支付未完成';
    }
  } catch (error) {
    console.error('Error checking payment result:', error);
    success.value = false;
    errorMessage.value = '查询支付结果失败';
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped>
.payment-result {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.result-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.result-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.loading {
  padding: 40px 20px;
}

.success-result,
.failed-result {
  padding: 40px 20px;
  text-align: center;
}

.result-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.success-icon {
  color: #67c23a;
}

.failed-icon {
  color: #f56c6c;
}

h2 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #303133;
}

p {
  font-size: 16px;
  color: #606266;
  margin-bottom: 8px;
}

.order-number {
  font-size: 14px;
  color: #909399;
  margin: 16px 0;
}

.error-message {
  color: #f56c6c;
  margin: 16px 0;
}

.action-buttons {
  margin-top: 24px;
}

.action-buttons .el-button {
  margin: 0 8px;
}
</style> 